<template>
    <div>
        <NavigationBar></NavigationBar>
        <div class="demo-image__lazy">
            <div class="photo" v-for="photo in albumInfo" :key="photo.albumId">
                <router-link :to="{ name: 'AlbumDetail', params: { albumId: photo.albumId }  }" target="_blank"
                    style="text-decoration: none;">
                    <el-image :src="photo.albumUrl" alt="Example JPEG image" class="image-wrapper"></el-image>
                </router-link>
                <div class="photo-overlay">
                    <router-link :to="{ name: 'AlbumDetail', params: { albumId: photo.albumId } }" target="_blank"
                        style="text-decoration: none;">
                        <h3 class="photo-title">{{ photo.albumTitle }}</h3>
                    </router-link>
                    <span class="el-icon-user-solid">{{ photo.createdBy }}</span>
                    <el-divider direction="vertical"></el-divider>
                    <span class="el-icon-time">{{ $moment(photo.createdTime).format('YYYY-MM-DD') }}</span>
                    <el-divider direction="vertical"></el-divider>
                    <span class="el-icon-view">{{ photo.albumViewNumber }}</span>
                </div>
            </div>
        </div>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page.sync="currentPage1" :page-size="pageSize" layout="prev, pager, next" :total="total">
        </el-pagination>
        <el-backtop :visibility-height="200" />
    </div>
</template>

<script>
import albumInfoApi from "@/api/albumInfo";
import NavigationBar from "@/components/NavigationBar.vue";


export default {
    components: {
        NavigationBar,
    },
    data() {
        return {
            page: {},
            total: null,
            currentPage1: 1,
            pageSize: 6,
            pageData: [],
            albumInfo: [],
        };
    },
    methods: {
        // methods here
        handleSizeChange(val) {
            this.pageSize = val;
            this.page = { pageNo: this.currentPage1, pageSize: val };
            console.log(`每页 ${val} 条`);
            this.fetchPageData(this.page);
        },
        handleCurrentChange(val) {
            this.currentPage1 = val;
            this.page = { pageNo: val, pageSize: this.pageSize };
            console.log(`当前页: ${val}`);
            this.fetchPageData(this.page);
        },
        async fetchPageData(page) {
            try {
                const response = await albumInfoApi.getAlbumPageInfo(page); // 传入当前页数据
                this.pageData = response; // 将获取的数据存储在组件的状态中
                this.albumInfo = response.result; // 将获取的数据存储在组件的状态中
                this.total = response.total; // 将获取的数据存储在组件的状态中
                console.log('获取数据成功:', this.pageData); // 打印获取的数据
            } catch (error) {
                console.error('获取数据失败:', error); // 异常处理
            }
        },
    },
    mounted() {
        // 组件挂载时调用获取数据的方法
        this.page = { pageNo: this.currentPage1, pageSize: this.pageSize };
        this.fetchPageData(this.page); // 组件创建时调用数据获取方法
    },
};
</script>

<style scoped>
.demo-image__lazy {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 每行显示3列 */
    gap: 10px;
    /* 设置列间距 */
    margin-top: 10px;
}

.photo {
    position: relative;
    /* 设置为相对定位，为绝对定位的子元素提供参考 */
    overflow: hidden;
    /* 防止超出部分显示 */
}

.photo-title {
    margin-top: 10px;
    /* 标题与照片的间距 */
    font-size: 12px;
    /* 根据需要调整字体大小 */
    color: #f8f4f4;
    /* 标题颜色 */
}

.image-wrapper {
    width: 100%;
    height: 250px;
    /* 让图片填满单元格 */
    border-radius: 15px;
}

.rounded-image {
    width: 100%;
    /* 根据需要设置图片宽度 */
    /* height: auto; */
    /* 保持宽高比例 */
    border-radius: 15px;
    /* 设置圆角 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* 添加阴影效果（可选） */
}

.photo-overlay {
    position: absolute;
    /* 绝对定位 */
    bottom: 0;
    /* 固定在底部 */
    left: 0;
    /* 从左侧开始 */
    right: 0;
    /* 到达右侧 */
    /* background: rgba(0, 0, 0, 0.5); */
    /* 半透明背景 */
    color: white;
    /* 文字颜色为白色 */
    padding: 10px;
    /* 内边距 */
    text-align: center;
    /* 文本居中 */
    font-size: 12px;
}
</style>
